import React, { useEffect, useState } from 'react'
import { IRouteComponentProps } from "umi"
import "./search.less"
import { Table } from "antd"
import { ImailList } from "../../utils/interface"
import moment from "moment"
import { useSelector, useDispatch } from "umi"
const mail: React.FC<IRouteComponentProps> = props => {
  const state = useSelector((state: { mail: any }) => state.mail)
  const dispatch = useDispatch()
  // type,keyword,count
  let [type, setType] = useState("")
  let [keyword, setkeyword] = useState("")
  let [count, setcount] = useState("")
  const columns = [
    {
      title: '搜索词',
      dataIndex: "keyword",
      key: 'keyword',
      width: 50,
    },
    {
      title: '搜索量',
      dataIndex: 'count',
      key: 'count',
      width: 50,
    },
    {
      title: '搜索时间',
      render: (row: ImailList) => {
        return <span>{moment(row.createAt).format('YYYY-MM-DD h:mm:ss')}</span>
      },
      key: 'createAt',
      width: 50,
    },
    {
      title: '操作',
      render: () => {
        return <span>删除</span>
      },
      width: 50,
    }
  ];

  useEffect(() => {
    dispatch({
      type: "mail/search",
      payload: { type, keyword, count }
    })
  }, [])
  function search(type: string, keyword: string, count: string) {
    console.log("1");
    console.log(type, keyword, count);

    dispatch({
      type: "mail/search",
      payload: { type, keyword, count }

    })
  }
  return <div className="box">
    <div className="header">
      <div className="top">
        <span>类型 ：<input type="text" placeholder="请输入类型" value={type} onChange={e => { setType(e.target.value) }} /></span>
        <span>搜索词：<input type="text" placeholder="请输入搜索词" value={keyword} onChange={e => { setkeyword(e.target.value) }} /></span>
        <span>搜索量：<input type="text" placeholder="请输入搜索量" value={count} onChange={e => { setcount(e.target.value) }} /></span>
      </div>
      <div className="botton">
        <div className="kong"></div>
        <button className="search" onClick={() => { search(type, keyword, count) }}>搜索</button>
        <button onClick={() => { setType(""), setkeyword(""), setcount("") }}>重置</button>
      </div>
    </div>

    <div className="main">
      <Table className="tables" columns={columns as any} dataSource={state.searchList} scroll={{ y: 400 }} />,
    </div>
  </div>

};
export default mail

